<template>
  <div
    class="mask"
    v-if="showCart && caculation.totalCount > 0"
    @click="handleShowCart"
  ></div>
  <div class="cart">
    <div class="product" v-if="showCart && caculation.totalCount > 0">
      <div class="product__header">
        <div
          class="check_all iconfont"
          v-html="caculation.allCheckedStatus ? '&#xe618;' : '&#xe619;'"
          @click="() => handleCheckAllButton(shopId)"
        ></div>
        <div class="check_all_text">全选</div>
        <div class="clear__cart" @click="() => handleClearCart(shopId)">
          清空购物车
        </div>
      </div>
      <div class="product__item" v-for="item in productList" :key="item._id">
        <div
          class="product__item__checked iconfont"
          v-html="item.checked ? '&#xe618;' : '&#xe63a;'"
          @click="() => changeCartItemCheck(shopId, item._id)"
        ></div>
        <img class="product__item__img" :src="item.imgUrl" alt="" />
        <div class="product__item__desc">
          <h4 class="product__title">{{ item.name }}</h4>
          <div class="product__price">
            <span class="current__price">￥{{ item.price }}</span>
            <span class="past__price">￥{{ item.oldPrice }}</span>
          </div>
        </div>
        <div class="product__number">
          <span
            class="product__number__minus"
            @click="
              () => {
                changeItemToCart(shopId, item._id, item, -1);
              }
            "
            >-</span
          >
          <span class="num">
            {{ item.count || 0 }}
          </span>
          <span
            class="product__number__plus"
            @click="
              () => {
                changeItemToCart(shopId, item._id, item, 1);
              }
            "
            >+</span
          >
        </div>
      </div>
    </div>
    <div class="total__number">{{ caculation.totalCount }}</div>
    <div class="cart__icon iconfont" @click="handleShowCart">&#xe990;</div>
    <div class="cart__total">
      总计：<span class="cart__total__yuan">￥{{ caculation.totalPrice }}</span>
    </div>
    <div class="cart__pay" v-show="caculation.totalPrice > 0">
      <router-link :to="{ path: `/OrderConfirmation/${shopId}` }"
        >去结算</router-link
      >
    </div>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { ref } from "vue";
import { useCommonCartEffect } from "../../effect/cartEffects";
// 购物车总数量、总价、增删、清空、全选
const useCartEffect = (shopId) => {
  const store = useStore();
  // const cartList = store.state.cartList;
  const { changeItemToCart, productList, caculation } =
    useCommonCartEffect(shopId);
  const changeCartItemCheck = (shopId, productId) => {
    store.commit("changeCartItemCheck", { shopId, productId });
  };
  const handleClearCart = () => {
    store.commit("handleClearCart", { shopId });
  };

  const handleCheckAllButton = (shopId) => {
    store.commit("handleCheckAllButton", { shopId });
  };
  return {
    caculation,
    productList,
    changeItemToCart,
    changeCartItemCheck,
    handleClearCart,
    handleCheckAllButton,
  };
};
// 展示与隐藏购物车
const hideShowCartEffect = () => {
  const showCart = ref(false);
  const handleShowCart = () => {
    showCart.value = !showCart.value;
  };
  return { handleShowCart, showCart };
};
export default {
  setup() {
    const route = useRoute();
    const shopId = route.params.id;
    const { handleShowCart, showCart } = hideShowCartEffect();
    const {
      caculation,
      productList,
      changeItemToCart,
      changeCartItemCheck,
      handleClearCart,
      handleCheckAllButton,
    } = useCartEffect(shopId);
    return {
      caculation,
      productList,
      shopId,
      changeItemToCart,
      changeCartItemCheck,
      handleClearCart,
      handleCheckAllButton,
      showCart,
      handleShowCart,
    };
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/viriables.scss";
@import "../../style/mixins.scss";
.total__number {
  position: absolute;
  top: 0.05rem;
  left: 0.5rem;
  width: 0.2rem;
  height: 0.2rem;
  text-align: center;
  line-height: 0.2rem;
  color: $white-color;
  background-color: #e93b3b;
  border-radius: 50%;
  transform: scale(0.8);
}
.cart {
  display: flex;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.5rem;
  background-color: $white-color;
  border-top: 0.01rem solid $content-bgcolor;
  z-index: 1;
  &__icon {
    width: 0.76rem;
    line-height: 0.5rem;
    font-size: 0.3rem;
    text-align: center;
    color: $blue-color;
  }
  &__total {
    flex: 1;
    margin-left: 0.15rem;
    line-height: 0.5rem;
    color: $content-fontcolor;
    &__yuan {
      font-size: 0.18rem;
      color: $red-color;
    }
  }
  &__pay {
    width: 0.98rem;
    line-height: 0.5rem;
    text-align: center;
    font-size: 0.14rem;
    background-color: $blue-color;
    a {
      text-decoration: none;
      color: $white-color;
    }
  }
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}
.product {
  position: absolute;
  bottom: 0.5rem;
  right: 0;
  left: 0;
  overflow-y: scroll;
  flex: 1;
  padding: 0 0.18rem 0.12rem 0.18rem;
  background-color: $white-color;
  &__header {
    display: flex;
    line-height: 0.5rem;
    border-bottom: 0.01rem solid $content-bgcolor;
    .check_all {
      font-size: 0.2rem;
      color: $blue-color1;
    }
    .check_all_text {
      flex: 1;
      margin-left: 0.1rem;
      font-size: 0.14rem;
      color: $border-color;
    }
    .clear__cart {
      padding: 0;
      font-size: 0.14rem;
      text-align: center;
      color: $border-color;
    }
  }
  &__item {
    position: relative;
    display: flex;
    padding: 0.12rem 0;
    border-bottom: 0.01rem solid $content-bgcolor;
    &__checked {
      margin-right: 0.16rem;
      line-height: 0.5rem;
      text-align: center;
      font-size: 0.2rem;
      color: $blue-color1;
    }
    &__img {
      width: 0.46rem;
      height: 0.46rem;
    }
    &__desc {
      overflow: hidden;
      flex: 1;
      margin-left: 0.16rem;
      .product__title {
        margin: 0;
        line-height: 0.2rem;
        font-size: 0.14rem;
        @include ellipsis;
      }
      .product__price {
        margin: 0.06rem 0 0 0;
        line-height: 0.2rem;
        .current__price {
          font-size: 0.14rem;
          color: $red-color;
        }
        .past__price {
          margin-left: 0.06rem;
          font-size: 0.12rem;
          color: #999;
          text-decoration: line-through;
        }
      }
    }
    .product__number {
      position: absolute;
      right: 0;
      bottom: 0.12rem;
      &__minus,
      &__plus {
        display: inline-block;
        width: 0.2rem;
        height: 0.2rem;
        text-align: center;
        line-height: 0.16rem;
        font-size: 0.2rem;
        border-radius: 0.1rem;
      }
      &__minus {
        box-sizing: border-box;
        color: $border-color;
        border: 0.01rem solid $border-color;
      }
      &__plus {
        color: $white-color;
        background-color: $blue-color1;
      }
      .num {
        margin: 0 0.1rem;
        font-size: 0.16rem;
      }
    }
  }
}
</style>
